<template>
    <div class="pt44">
        <div class="record_type">
            <div>
                <span class="checked">小通帮你借</span>
            </div>
            <div>
                <span @click="toAccountRecord">小通帮你延</span>
            </div>
        </div>
        <div id="iscrollBox"  @scroll= "scrollFuc">
            <dl>
                <dd v-for="item in recordArray"  @click="toOrderDetails(item)">
                    <div>
                        <i v-bind:class="item.stateClass" class="record_icon"></i><span class="apply_money">{{item.borrowAmt}}元</span>
                        <span class="fr">{{item.serialNoTime}}</span>
                    </div>
                    <div class="record_explain">
                        <span v-bind:class="item.stateClass">{{item.orderStatemsg}}</span>
                        <span v-if="item.orderState == '02' && item.repayState != '01'" class="fr"><a @click.stop="replayLoan(item)" href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">还款</a></span>
<!--                         <span v-if="item.orderState == '01' && item.repayState != '01'" class="fr"><a @click.stop="qrcode(item)" href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">继续交易</a></span> -->
                    </div>
                </dd>
            </dl>
        </div>

    </div>
</template>

<script>
var cm = require("../components/common.js");

var iscrollBoxDom;
export default  {
    name: 'LoanRecord',  // 闪贷款记录
    data () {  // 数据
        return {
            msg: 'LoanRecord',
            minCount:0,
            maxCount:20,
            recordArray:[],
            sHeight:0,
//            $scrollParent
        }
    },
    methods:{ // 自定义方法，可对data进行处理
        init(){
            this.sHeight = window.innerHeight-100;
            $("#iscrollBox").css("height",this.sHeight+"px");
            iscrollBoxDom = $("#iscrollBox")[0];
//            this.$scrollParent = $("#iScrollparent");
        },
        scrollFuc(){

            console.log("iscorllMove" + iscrollBoxDom.scrollTop);
           if(iscrollBoxDom.scrollTop == 0){
                console.log("滚到头");
                this.refreshData();
            }else if(iscrollBoxDom.scrollTop == (iscrollBoxDom.scrollHeight - this.sHeight)){
                console.log("滚动到底");
                this.pushData();
            }
        },
        refreshData(){  // 刷新数据
            this.$store.state.showLoading = true;
            this.minCount = 0;
            this.maxCount = 20;
            this.getRecordData();
        },
        pushData(){  // 加载更多数据
            this.$store.state.showLoading = true;
            this.minCount += 20;
            this.maxCount += 20;
            this.getRecordData();
        },
        handleRecorArray(theRecord){

            var stateClassMap = {
                "00":"repaid",
                "01":"fail",
                "02":"unpaid"
            };
            for(var i=0,l=theRecord.length;i<l;i++){
                theRecord[i].borrowAmt = cm.comdify(parseFloat(theRecord[i].borrowAmt).toFixed(2));
                theRecord[i].freezeAmt = cm.comdify(parseFloat(theRecord[i].freezeAmt).toFixed(2));

                if(theRecord[i].applyDate && theRecord[i].applyDate != undefined){  // applyDate 改成 applyDate 由于后台用applyDate排序
                    var formatetapplyDateStr = String(theRecord[i].applyDate) + String(theRecord[i].applyTime);
                    theRecord[i].serialNoTime = cm.getDateStrFormate1(formatetapplyDateStr,"second");
                }else{
                    console.log("serialNoTimeserialNoTime....")
                    theRecord[i].serialNoTime = cm.getDateStrFormate1(theRecord[i].serialNoTime,"second")
                }


                if(theRecord[i].orderState == "01"){
                    theRecord[i].orderStatemsg = "待完成交易";
                }else if(theRecord[i].orderState == "02"){
                    theRecord[i].orderStatemsg = "借款成功待还款";
                    if(theRecord[i].repayState == "01"){
                        theRecord[i].orderStatemsg = "已还款";
                    }
                }else{
                    theRecord[i].orderStatemsg = "失败";
                }
            }
            if(this.minCount == 0){
                this.recordArray = theRecord;
            }else{
                this.recordArray = this.recordArray.concat(theRecord);
            }

        },
        toOrderDetails(item){
            console.log("toOrderDetails.........");
            this.$store.state.detailItem = item;
            location.hash = "#/orderDetails";
        },
        replayLoan(item){ // 还款
            console.log("replayLoan.......");
            this.$store.state.repayItem = item;
            location.hash = "#/repayMent";
        },
/*        qrcode(item){  // 创建二维码
            var _this = this;
            var rcParamates = {
                prdtNo:       this.$store.state.prdtNo, //产品号
                channelNo:    this.$store.state.channelNo, //产品渠道
                serialNo:     item.serialNo, //串号
                creditCardNo: item.creditCardNo,  //信用卡号
                servlet_type:"recreate_order"
            };
            $.post(XtsdOrderServlet, rcParamates, function(rcdata){
                console.dir(rcdata);
                if(rcdata.xtsd_OrderInfo_response && rcdata.xtsd_OrderInfo_response.respCode == "0000"){
                    _this.$store.state.payCode = rcdata.xtsd_OrderInfo_response.serialNo;
                    location.hash = "#/qrcodepay";
                }else if(rcdata.xtsd_OrderInfo_response && rcdata.xtsd_OrderInfo_response.respMsg){
                    _this.$store.state.errorMsg = rcdata.xtsd_OrderInfo_response.respMsg;
                }else{
                    _this.$store.state.errorMsg = "付款码生成失败";
                }
            })

        },*/
        toAccountRecord(){  // 跳转到
            location.hash = "#/accountRecord";
        },
        getRecordData(){
            var lrParaments = {
            openId: this.$store.state.openid,  //微信号
            prdtNo:this.$store.state.prdtNo, //产品号
            channelNo: this.$store.state.channelNo, //产品渠道
            minCount:this.minCount,
            maxCount:this.maxCount,
            servlet_type:"query_order"
            }
            var _this = this;
            $.post(XtsdOrderServlet, lrParaments, function(lrdata) {
                console.dir(lrdata);
                _this.$store.state.showLoading = false;
                if(lrdata.xtsd_OrderInfo_response && lrdata.xtsd_OrderInfo_response.respCode== "0000" && lrdata.xtsd_OrderInfo_response.resXtsdOrderInfos_arrays && lrdata.xtsd_OrderInfo_response.resXtsdOrderInfos_arrays.resXtsdOrderInfos){
                    var theRecord =lrdata.xtsd_OrderInfo_response.resXtsdOrderInfos_arrays.resXtsdOrderInfos;
                    _this.handleRecorArray(theRecord);
                    setTimeout(function  () {
                        _this.scrollHeight = $("#iscrollBox")[0].scrollHeight;

                    },300);

                }else if(lrdata.xtsd_OrderInfo_response && lrdata.xtsd_OrderInfo_response.respCode== "0000" && (lrdata.xtsd_OrderInfo_response.resXtsdOrderInfos_arrays == "" || lrdata.xtsd_OrderInfo_response.resXtsdOrderInfos_arrays.resXtsdOrderInfos.length ==0)){
                    _this.$store.state.errorMsg = "没有更多记录";
                }else if(lrdata.error_response && lrdata.error_response.resp_msg){
                    _this.$store.state.errorMsg = lrdata.error_response.resp_msg;
                }else{
                    _this.$store.state.errorMsg = "查询失败";
                }
            });
        }
    },
    beforeMount:function  () {
        if(this.$route.query.openid){
            this.$store.state.openid = encodeURIComponent(this.$route.query.openid);
        }

        this.$store.state.channelNo = "01";
        this.getRecordData();

    },
    mounted:function  () {
        this.init();
        this.$store.commit('changeTitle','小通帮你借');

/*        var myScroll = new IScroll('#iscrollBox',{
            mouseWheel: false,
            scrollbars: false
        });
        setTimeout(function  () {
            myScroll.refresh()
        },1000);
        myScroll.on('scrollEnd', function  () {
            console.log('滑动到最底部了2222' + this.y)
        });*/
       /* $("#iScrollparent").on("scroll",function  () {
            console.log("iScrollparent scrol")
            console.log($("#iScrollparent")[0].scrollTop)
        })*/
    },
    beforeRouteEnter (to, from, next){
        if(from.name == "Repayment"){
            setTimeout(function () {
                next();
            },500);
        }else{
            next();
        }

    },
    beforeRouteLeave:function(to,from,next) {
        this.$store.state.showBack = true;
        if(to.name != "AccountRecord" && to.name != "OrderDetails"  && to.name != "Repayment" && to.name != "Home"){
            wx.closeWindow();
        }else{
            next();
        }
    }
}
</script>

<style lang='scss' scoped>
@import "../assets/scss/vendors/weui-sass/src/style/base/mixin/setOnepx";
.record_type{
    margin:15px 0;
    div{
        text-align: center;
        &:first-child{
            display: inline-block;
            float: left;
            width: 50%
        }
    }
    span{
        display:inline-block;
        margin: auto;
        position:relative;
        &:after{
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            border-bottom: 1px solid #ccc;
            color: #ccc;
        }
    }
    span.checked{
        &:after{
            border-bottom-color: #2792e4;
        }
    }
}

#iscrollBox{

    overflow: auto;
}

dl{
    padding: 0 15px;
    font-size: 14px;
    dd{
        background-color: #fff;
        padding:10px;
        line-height: 36px;
        color: #999;
        margin-top: 10px;
    }
    .record_explain{

        position: relative;
        padding-left: 20px;
        &:before{
            @include setTopLine();
        }
        .weui-btn_mini{
            margin-top: 10px;
        }
    }
    .apply_money{
        font-size: 18px;
        color: #222;
    }
    .unpaid{
        color: #2792e4;
    }
    .fail{
        color:#f01921;
    }
    .record_icon{
        display: inline-block;
        width:20px;
        height:20px;
        vertical-align: sub;
        margin-right: 5px;
        background-size: 100% 100%;
        background-image: url(/FuLiBao/Lenovo/static/images/yihuankuan_icon.png);
        &.unpaid{
            background-image: url(/FuLiBao/Lenovo/static/images/weihuankuan_icon.png);
        }
        &.fail{
            background-image: url(/FuLiBao/Lenovo/static/images/huankuanshibai_icon.png);
        }
    }

}
</style>
